import React, { useRef, useEffect } from 'react';
import G6 from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', label: '节点1', x: 100, y: 100 },
    { id: 'node2', label: '节点2', x: 300, y: 100 },
  ],
  edges: [{ source: 'node1', target: 'node2' }],
};

function G6Example() {
  const containerRef = useRef(null);

  useEffect(() => {
    // 创建 G6 图
    const graph = new G6.Graph({
      container: containerRef.current,
      width: 500,
      height: 500,
    });

    // 加载数据
    graph.data(data);

    // 设置节点的样式
    graph.node((node) => {
      return {
        shape: 'circle',
        label: node.label,
      };
    });

    // 设置边的样式
    graph.edge((edge) => {
      return {
        shape: 'polyline',
        style: {
          stroke: '#1890FF',
          lineWidth: 2,
        },
      };
    });

    // 渲染图
    graph.render();

    // 获取画布中的 DOM 节点
    const canvas = graph.get('canvas').get('el');

    // 监听画布的鼠标移动事件
    canvas.addEventListener('mousemove', (evt) => {
      // 将鼠标坐标转化为相对于画布的坐标
      const point = graph.getPointByClient(evt.clientX, evt.clientY);
      // 找到鼠标所在的节点
      const node = graph.getNodes().find((node) => {
        // 遍历所有节点的 BBox 对象，检查鼠标坐标是否位于 BBox 范围内
        const bbox = node.getBBox();
        return (
          point.x >= bbox.minX &&
          point.x <= bbox.maxX &&
          point.y >= bbox.minY &&
          point.y <= bbox.maxY
        );
      });
      // 如果找到了节点，则显示模态框
      if (node) {
        showModal(node);
      } else {
        // 否则隐藏模态框
        hideModal();
      }
    });

    // 组件销毁时，销毁 G6 图
    return () => {
      graph.destroy();
    };
  }, []);

  // 显示模态框
  function showModal(node) {
    const modal = document.getElementById('my-modal');
    modal.style.display = 'block';
    // 将模态框放置在节点下方
    const bbox = node.getBBox();
    const x = bbox.centerX;
    const y = bbox.maxY + 10;
    modal.style.left = x + 'px';
    modal.style.top = y + 'px';
  }

  // 隐藏模态框
  function hideModal() {
    const modal = document.getElementById('my-modal');
    modal.style.display = 'none';
  }

  return (
    <div style={{ position: 'relative' }}>
      <div ref={containerRef} style={{ width: '500px', height: '500px' }}></div>
      <div
        id="my-modal"
        style={{
          display: 'none',
          position: 'absolute',
          zIndex: 999,
          padding: '16px',
          backgroundColor: 'white',
          border: '1px solid #ddd',
          boxShadow: '0 0 10px #ddd',
        }}
      >
        <p>这是我的模态框</p>
      </div>
    </div>
  );
}

export default G6Example;
